<template>
    <p>{{ name }}</p>
    <button @click="updateData">更新数据</button>
</template>

<script lang="ts">
export default {
    name: 'Hello'
}
</script>

<!--setup语法糖-->
<script setup lang="ts">
//引入
import { ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue' 


let name = ref('zs')

function updateData() { 
    name.value = 'ls'
}

//创建前后
console.log('创建前后');


//挂载前
onBeforeMount(()=>{ 
    console.log('挂载前');
    
})
//挂载后
 onMounted(()=>{ 
    console.log('挂载后');
}) 

//更新前
 onBeforeUpdate(()=>{ 
    console.log('更新前');
}) 

//更新后
 onUpdated(()=> { 
    console.log('更新后');
})

//卸载前
 onBeforeUnmount(()=>{ 
    console.log('卸载前');
}) 
//卸载后
 onUnmounted(()=> { 
    console.log('卸载后');
})

</script>